<template>
  <mu-container class="pos-r">
    <mu-row class="padt10">
      <mu-paper :z-depth="1" style="width: 100%" class="round5 pad5">
        <mu-flex align-items="center">
          <mu-flex>
            <mu-button icon @click="$goback()">
              <mu-icon value="arrow_back"></mu-icon>
            </mu-button>
          </mu-flex>
          <mu-flex fill><h3>试卷编辑</h3></mu-flex>
          <mu-flex>
            <div class="padr10">
              <mu-button small fab color="primary" @click="create()">
                <mu-icon value="save"></mu-icon>
              </mu-button>
            </div>
          </mu-flex>
        </mu-flex>
      </mu-paper>
    </mu-row>
    <mu-row class="padt10 pos-r" v-loading="loading">
      <mu-paper class="pad10" style="width: 100%" :z-depth="1">
        <mu-tabs :value.sync="active" inverse>
          <mu-tab>知觉速度</mu-tab>
          <mu-tab>常识判断</mu-tab>
          <mu-tab>言语表达</mu-tab>
          <mu-tab>判断推理</mu-tab>
          <mu-tab>资料分析</mu-tab>
          <mu-tab>数量关系</mu-tab>
        </mu-tabs>
        <div class="pad10">
          <!--          知觉速度&#45;&#45;start-->
          <div v-show="active === 0">
            <!--            模块标题：-->
            <mu-row :gutter="true">
              <mu-col span="12">
                <mu-text-field v-model="m1.title" class="" label="模块标题" placeholder="请输题目介绍、要求、分值、时间" multi-line :rows="3" :rows-max="6" full-width></mu-text-field>
              </mu-col>
              <!--            题目分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m1.score_total" class="" label="模块总分" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            每题分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m1.score_item" class="" label="每题分数" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            考试时间：-->
              <mu-col span="3">
                <mu-text-field v-model="m1.time" class="" label="考试时间(分钟)" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            题目数量：-->
              <mu-col span="3">
                <mu-text-field v-model="m1.num" class="" label="题目数量" placeholder="" full-width></mu-text-field>
              </mu-col>
            </mu-row>
            <!--            题目列表：-->
            <mu-row>
              <mu-col span="12">
                <mu-button @click="m1.enOpen=true">选择</mu-button>
              </mu-col>
              <mu-col span="12">
                <entityViewer entityName="Point" :multi="false" :id="m1.point" @change="(point)=>{m1.point = point}"></entityViewer>
              </mu-col>
            </mu-row>
            <mu-dialog width="360" transition="slide-bottom" fullscreen :open="m1.enOpen">
              <mu-appbar color="primary" title="请选择">
                <mu-button slot="left" icon @click="m1.enOpen=false">
                  <mu-icon value="close"></mu-icon>
                </mu-button>
              </mu-appbar>
              <div style="padding: 24px;">
                <entity entity="Point" :multi="false" @cancel="m1.enOpen = false" @change="(select)=>{setEntity(select,'m1')}"></entity>
              </div>
            </mu-dialog>
            <!--            题目列表：-->
            <mu-row class="bdda pad5 mar5" v-for="(item,index) in m1.questions" :key="index">
              <mu-col span="1">{{index + 1}}</mu-col>
              <mu-col span="6">{{item.title}}</mu-col>
            </mu-row>
          </div>
          <!--          知觉速度&#45;&#45;end-->
          <!--          常识判断&#45;&#45;start-->
          <div v-show="active === 1">
            <!--            模块标题：-->
            <mu-row :gutter="true">
              <mu-col span="12">
                <mu-text-field v-model="m2.title" class="" label="模块标题" placeholder="请输题目介绍、要求、分值、时间" multi-line :rows="3" :rows-max="6" full-width></mu-text-field>
              </mu-col>
              <!--            题目分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m2.score_total" class="" label="模块总分" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            每题分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m2.score_item" class="" label="每题分数" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            考试时间：-->
              <mu-col span="3">
                <mu-text-field v-model="m2.time" class="" label="考试时间(分钟)" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            题目数量：-->
              <mu-col span="3">
                <mu-text-field v-model="m2.num" class="" label="题目数量" placeholder="" full-width></mu-text-field>
              </mu-col>
            </mu-row>
            <!--            题目列表：-->
            <mu-row>
              <mu-col span="12">
                <mu-button @click="m2.enOpen=true">选择</mu-button>
              </mu-col>
              <mu-col span="12">
                <entityViewer entityName="Point" :multi="false" :id="m2.point" @change="(point)=>{m2.point = point}"></entityViewer>
              </mu-col>
            </mu-row>
            <mu-dialog width="360" transition="slide-bottom" fullscreen :open="m2.enOpen">
              <mu-appbar color="primary" title="请选择">
                <mu-button slot="left" icon @click="m2.enOpen=false">
                  <mu-icon value="close"></mu-icon>
                </mu-button>
              </mu-appbar>
              <div style="padding: 24px;">
                <entity entity="Point" :multi="false" @cancel="m2.enOpen = false" @change="(select)=>{setEntity(select,'m2')}"></entity>
              </div>
            </mu-dialog>
            <!--            题目列表：-->
            <mu-row class="bdda pad5 mar5" v-for="(item,index) in m2.questions" :key="index">
              <mu-col span="1">{{index + 1}}</mu-col>
              <mu-col span="6">{{item.title}}</mu-col>
            </mu-row>
          </div>
          <!--          常识判断&#45;&#45;end-->
          <!--          言语表达&#45;&#45;start-->
          <div v-show="active === 2">
            <!--            模块标题：-->
            <mu-row :gutter="true">
              <mu-col span="12">
                <mu-text-field v-model="m3.title" class="" label="模块标题" placeholder="请输题目介绍、要求、分值、时间" multi-line :rows="3" :rows-max="6" full-width></mu-text-field>
              </mu-col>
              <!--            题目分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m3.score_total" class="" label="模块总分" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            每题分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m3.score_item" class="" label="每题分数" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            考试时间：-->
              <mu-col span="3">
                <mu-text-field v-model="m3.time" class="" label="考试时间(分钟)" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            题目数量：-->
              <mu-col span="3">
                <mu-text-field v-model="m3.num" class="" label="题目数量" placeholder="" full-width></mu-text-field>
              </mu-col>
            </mu-row>
            <!--            题目列表：-->
            <mu-row>
              <mu-col span="12">
                <mu-button @click="m3.enOpen=true">选择</mu-button>
              </mu-col>
              <mu-col span="12">
                <entityViewer entityName="Point" :multi="false" :id="m3.point" @change="(point)=>{m3.point = point}"></entityViewer>
              </mu-col>
            </mu-row>
            <mu-dialog width="360" transition="slide-bottom" fullscreen :open="m3.enOpen">
              <mu-appbar color="primary" title="请选择">
                <mu-button slot="left" icon @click="m3.enOpen=false">
                  <mu-icon value="close"></mu-icon>
                </mu-button>
              </mu-appbar>
              <div style="padding: 24px;">
                <entity entity="Point" :multi="false" @cancel="m3.enOpen = false" @change="(select)=>{setEntity(select,'m3')}"></entity>
              </div>
            </mu-dialog>
            <!--            题目列表：-->
            <mu-row class="bdda pad5 mar5" v-for="(item,index) in m3.questions" :key="index">
              <mu-col span="1">{{index + 1}}</mu-col>
              <mu-col span="6">{{item.title}}</mu-col>
            </mu-row>
          </div>
          <!--          言语表达&#45;&#45;end-->
          <!--          判断推理&#45;&#45;start-->
          <div v-show="active === 3">
            <!--            模块标题：-->
            <mu-row :gutter="true">
              <mu-col span="12">
                <mu-text-field v-model="m4.title" class="" label="模块标题" placeholder="请输题目介绍、要求、分值、时间" multi-line :rows="3" :rows-max="6" full-width></mu-text-field>
              </mu-col>
              <!--            题目分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m4.score_total" class="" label="模块总分" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            每题分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m4.score_item" class="" label="每题分数" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            考试时间：-->
              <mu-col span="3">
                <mu-text-field v-model="m4.time" class="" label="考试时间(分钟)" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            题目数量：-->
              <mu-col span="3">
                <mu-text-field v-model="m4.num" class="" label="题目数量" placeholder="" full-width></mu-text-field>
              </mu-col>
            </mu-row>
            <!--            题目列表：-->
            <mu-row>
              <mu-col span="12">
                <mu-button @click="m4.enOpen=true">选择</mu-button>
              </mu-col>
              <mu-col span="12">
                <entityViewer entityName="Point" :multi="false" :id="m4.point" @change="(point)=>{m4.point = point}"></entityViewer>
              </mu-col>
            </mu-row>
            <mu-dialog width="360" transition="slide-bottom" fullscreen :open="m4.enOpen">
              <mu-appbar color="primary" title="请选择">
                <mu-button slot="left" icon @click="m4.enOpen=false">
                  <mu-icon value="close"></mu-icon>
                </mu-button>
              </mu-appbar>
              <div style="padding: 24px;">
                <entity entity="Point" :multi="false" @cancel="m4.enOpen = false" @change="(select)=>{setEntity(select,'m4')}"></entity>
              </div>
            </mu-dialog>
            <!--            题目列表：-->
            <mu-row class="bdda pad5 mar5" v-for="(item,index) in m4.questions" :key="index">
              <mu-col span="1">{{index + 1}}</mu-col>
              <mu-col span="6">{{item.title}}</mu-col>
            </mu-row>
          </div>
          <!--          判断推理&#45;&#45;end-->
          <!--          资料分析&#45;&#45;start-->
          <div v-show="active === 4">
            <!--            模块标题：-->
            <mu-row :gutter="true">
              <mu-col span="12">
                <mu-text-field v-model="m5.title" class="" label="模块标题" placeholder="请输题目介绍、要求、分值、时间" multi-line :rows="3" :rows-max="6" full-width></mu-text-field>
              </mu-col>
              <!--            题目分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m5.score_total" class="" label="模块总分" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            每题分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m5.score_item" class="" label="每题分数" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            考试时间：-->
              <mu-col span="3">
                <mu-text-field v-model="m5.time" class="" label="考试时间(分钟)" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            题目数量：-->
              <mu-col span="3">
                <mu-text-field v-model="m5.num" class="" label="题目数量" placeholder="" full-width></mu-text-field>
              </mu-col>
            </mu-row>
            <!--            题目列表：-->
            <mu-row>
              <mu-col span="12">
                <mu-button @click="m5.enOpen=true">选择</mu-button>
              </mu-col>
              <mu-col span="12">
                <entityViewer entityName="Point" :multi="false" :id="m5.point" @change="(point)=>{m5.point = point}"></entityViewer>
              </mu-col>
            </mu-row>
            <mu-dialog width="360" transition="slide-bottom" fullscreen :open="m5.enOpen">
              <mu-appbar color="primary" title="请选择">
                <mu-button slot="left" icon @click="m5.enOpen=false">
                  <mu-icon value="close"></mu-icon>
                </mu-button>
              </mu-appbar>
              <div style="padding: 24px;">
                <entity entity="Point" :multi="false" @cancel="m5.enOpen = false" @change="(select)=>{setEntity(select,'m5')}"></entity>
              </div>
            </mu-dialog>
            <!--            题目列表：-->
            <mu-row class="bdda pad5 mar5" v-for="(item,index) in m5.questions" :key="index">
              <mu-col span="1">{{index + 1}}</mu-col>
              <mu-col span="6">{{item.title}}</mu-col>
            </mu-row>
          </div>
          <!--          资料分析&#45;&#45;end-->
          <!--          数量关系&#45;&#45;start-->
          <div v-show="active === 5">
            <!--            模块标题：-->
            <mu-row :gutter="true">
              <mu-col span="12">
                <mu-text-field v-model="m6.title" class="" label="模块标题" placeholder="请输题目介绍、要求、分值、时间" multi-line :rows="3" :rows-max="6" full-width></mu-text-field>
              </mu-col>
              <!--            题目分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m6.score_total" class="" label="模块总分" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            每题分数：-->
              <mu-col span="3">
                <mu-text-field v-model="m6.score_item" class="" label="每题分数" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            考试时间：-->
              <mu-col span="3">
                <mu-text-field v-model="m6.time" class="" label="考试时间(分钟)" placeholder="" full-width></mu-text-field>
              </mu-col>
              <!--            题目数量：-->
              <mu-col span="3">
                <mu-text-field v-model="m6.num" class="" label="题目数量" placeholder="" full-width></mu-text-field>
              </mu-col>
            </mu-row>
            <!--            题目列表：-->
            <mu-row>
              <mu-col span="12">
                <mu-button @click="m6.enOpen=true">选择</mu-button>
              </mu-col>
              <mu-col span="12">
                <entityViewer entityName="Point" :multi="false" :id="m6.point" @change="(point)=>{m6.point = point}"></entityViewer>
              </mu-col>
            </mu-row>
            <mu-dialog width="360" transition="slide-bottom" fullscreen :open="m6.enOpen">
              <mu-appbar color="primary" title="请选择">
                <mu-button slot="left" icon @click="m6.enOpen=false">
                  <mu-icon value="close"></mu-icon>
                </mu-button>
              </mu-appbar>
              <div style="padding: 24px;">
                <entity entity="Point" :multi="false" @cancel="m6.enOpen = false" @change="(select)=>{setEntity(select,'m6')}"></entity>
              </div>
            </mu-dialog>
            <!--            题目列表：-->
            <mu-row class="bdda pad5 mar5" v-for="(item,index) in m6.questions" :key="index">
              <mu-col span="1">{{index + 1}}</mu-col>
              <mu-col span="6">{{item.title}}</mu-col>
            </mu-row>
          </div>
          <!--          数量关系&#45;&#45;end-->
        </div>
      </mu-paper>
      <!--      <mu-paper class="pad30" style="width: 100%" :z-depth="1">-->
      <!--        <mu-row>-->
      <!--          <mu-button color="primary" @click="create()">-->
      <!--            <mu-icon left value="save"></mu-icon>-->
      <!--            <span>保存</span>-->
      <!--          </mu-button>-->
      <!--        </mu-row>-->
      <!--      </mu-paper>-->
    </mu-row>
  </mu-container>

</template>

<script>
import api from '@/assets/js/api'
import formCreator from '@/components/FormCreator/Creator/Creator'
import entity from '@/components/FormItem/entity'
import entityViewer from '@/components/FormItem/entityViewer'

export default {
  name: 'TestModel',
  components: {formCreator, entity, entityViewer},
  data () {
    return {
      id: undefined,
      form: {},
      items: {},
      loading: true,
      active: 0,
      // 模块数据
      m1: {
        subject: 6, // 知觉速度
        title: '本部分每道试题分值相同，采用倒扣分的方式计分，扣完本部分总分为止。答对则得分，答错倒扣分，不答不得分。根据题目要求，在四个选项中选出一个最恰当的答案。',
        score_total: '6',
        score_item: '0.1',
        time: '8',
        num: '60',
        enOpen: false,
        point: '', // 知识点
        questions: [] // 题目列表
      },
      m2: {
        subject: 1, // 常识判断
        title: '根据题目要求，在四个选项中选出一个最恰当的答案。',
        score_total: '6',
        score_item: '0.3',
        time: '15',
        num: '20',
        enOpen: false,
        point: '',
        questions: []
      },
      m3: {
        subject: 3, // 言语表达
        title: '本部分包括表达与理解两方面的内容。请根据题目要求，在四个选项中选出一个最恰当的答案。',
        score_total: '24',
        score_item: '0.8',
        time: '25',
        num: '30',
        enOpen: false,
        point: '',
        questions: []
      },
      m4: {
        subject: 2, // 判断推理
        title: '本部分包含图形推理、定义判断、类比推理和逻辑判断四个部分，根据题目的表述选择最佳选项。',
        score_total: '32',
        score_item: '0.8',
        time: '35',
        num: '40',
        enOpen: false,
        point: '',
        questions: []
      },
      m5: {
        subject: 5, // 资料分析
        title: '所给出的图、表、文字或综合性资料均有若干个问题需要你回答。你应根据资料提供的信息进行分析、比较、计算和判断处理。',
        score_total: '20',
        score_item: '1',
        time: '20',
        num: '20',
        enOpen: false,
        point: '',
        questions: []
      },
      m6: {
        subject: 4, // 数量关系
        title: '在这部分试题中，每道题呈现一段表述数字关系的文字，要求你迅速，准确的计算出答案。',
        score_total: '12',
        score_item: '1.2',
        time: '15',
        num: '10',
        enOpen: false,
        point: '',
        questions: []
      }
    }
  },
  created () {
  },
  mounted () {
    let _this = this
    _this.id = this.$route.query.id
    _this.loading = false
    _this.getData()
  },
  methods: {
    setEntity (selects, modelName) {
      let _this = this
      let model = this[modelName]
      console.log(model)
      model.point = selects.id
      model.enOpen = false
      // 检查题目数量，填写到上面
      console.log(model.point)
      api.post('/admin/Question/search',
        {
          _where: {
            eq: {
              'point.id': model.point,
              'subject.id': model.subject
            }
          },
          _order: {sort: 'ASC'}
        }, function (res) {
          let total = res.d.page.total
          let list = res.d.lists
          console.log(list)
          _this[modelName].num = total
          // _this[modelName].questions = list
        })
    },
    create () {
      let _this = this
      _this.loading = true
      api.post('/admin/Test/create', {
        id: _this.id,
        m1: _this.m1,
        m2: _this.m2,
        m3: _this.m3,
        m4: _this.m4,
        m5: _this.m5,
        m6: _this.m6
      }, function (res) {
        _this.loading = false
        if (res.s * 1 === 1) {
          _this.$toast.success('保存成功')
        }
        console.log(res)
      })
    },
    getData () {
      let _this = this
      api.get('/admin/Test/getinfo', {
        id: this.id
      }, function (res) {
        console.log(res)
        if (res.d !== '') {
          _this.m1 = res.d.m1
          _this.m2 = res.d.m2
          _this.m3 = res.d.m3
          _this.m4 = res.d.m4
          _this.m5 = res.d.m5
          _this.m6 = res.d.m6
        }
      })
    }
  },
  watch: {
    'm1.point': function (val, oldval) {
      console.log(val + 'aaa')
      this.m2.point = val
      this.m3.point = val
      this.m4.point = val
      this.m5.point = val
      this.m6.point = val
    }
  }
}
</script>

<style scoped>

</style>
